<template>
  <div class="flowNodeClass" style="overflow-x: auto;">
    <div class="flow-desgin">
      <section class="flow-desgin-main">


        <!-- 流程节点界面 -->
        <div class="box-scale">
            <div class="steps">
              <el-steps :active="orderStatus"  align-center>
                <el-tooltip effect="customized" placement="top-start" v-for="item in items"
            :show-after="500"
            style="font-size:14px;background-color:#419641;" popper-class="audittooltip">
            <template #content>
              <div v-if="item.taskVos" :class="gettooltiptitleclass(item)">
                <div style="float: left;">{{item.flowNodeName}}</div>
                <div style="float: right;">{{getmultiInstanceApprovalType(item.multiInstanceApprovalType)}}</div>
              </div>
              <div style="max-height: 400px;width: 300px;overflow-y: auto;">
              <div v-if="item.taskVos" v-for="(task,index) in item.taskVos">
                  <div v-if="item.isCurrentNode && errorReson!=''">
                    <div class="tooltipcontentclose">
                      <div style="height: 60px;">{{errorReson}}</div>
                    </div>
                  </div>
                  <div v-else :class="gettooltipcontentclass(item,task)">
                    <div v-if="item.flowNodeStatus!='0' && !task.isOperation && !task.operatorType && task.createTime!=null">
                      <!--或签未审批  不显示-->
                    </div>
                    <div v-else>
                      <div  style="width: 100%;float: left;">
                        <div style="float: left;">
                          {{item.flowNodeName=="申请"?"申请人":"审批人"}}:{{task.operatorId}}
                        </div>
                        <div style="float: right;">{{task.endTime}}</div>
                      </div>
                      <div v-if="gettooltipvis(item,task)" >审批动作:{{ getoperator(task)}}</div>
                      <div v-if="gettooltipvis(item,task)" >审批意见:{{task.comment}}</div>
                  </div>
                </div>
              </div>
              <div v-else-if="item.isHighlight">
                <div class="tooltiptitlefinish">
                  {{item.flowNodeName}}</div>
                <div class="tooltipcontentfinish">
                  <div style="height: 60px;">{{item.flowNodeType==9?"已结束":"已通过"}}</div>
                </div>
              </div>
              <div v-else-if="!item.taskVos">
                <div class="tooltiptitlewait">
                  {{item.flowNodeName}}</div>
                <div class="tooltipcontentwait">
                  <div style="height: 60px;">节点尚未激活</div>
                </div>
              </div>
            </div>

            </template>
            <!-- :description="getnodestatus(item)" -->
                  <el-step :title="item.flowNodeName" :class="getstepclass(item)"
                  style="flex-basis:9%;">
                  </el-step>
                </el-tooltip>
              </el-steps>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref, watch} from "vue";
import { useRouter } from "vue-router";
import { IconPlus, IconMinus } from "@arco-design/web-vue/es/icon";
import FlowManApi from "@/api/flowable/FlowManApi";
import FlowApi from "@/api/flowable/FlowApi";
import { STATUS_LIST, WIDGET, CMD,STATUS,CMDCONTENT } from "@/components/flowable/flow/common/FlowConstant";
import cache from "@/utils/cache";

const router = useRouter();


/*
let items=ref([
    {
      "flowNodeId": "userTask_6add4b3da39a48e29b1cf963edc0b2b4",
      "flowNodeName": "发起",//节点名称
      "flowNodeType": 0,//节点类型
      "flowNodeStatus": "1",//节点状态
      "approvalType": 0,//审批类型
      "multiInstanceApprovalType": null,//会签
      "isHighlight": true,//是否审批过，跟是否当前一起判断
      "isCurrentNode": false,//是否当前节点
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777882180433780736",
          "flowTaskName": "发起",//任务名称
          "createTime": "2024-04-10 10:11:57",//开始时间
          "endTime": "2024-04-10 10:13:17",//结束时间
          "operatorId": "1807ECA5-CD71-4A8E-9F82-6C41616C1CCF",//操作员id
          "operatorType": "0",//操作类型
          "recipientId": null,//转交人或加签人  根据操作类型
          "comment": "测试",//审批内容
          "isOperation": true//是否已操作
        }
      ]
    },
    {
      "flowNodeId": "userTask_12aff57015df469a96bb2a173eb2d554",
      "flowNodeName": "审核",
      "flowNodeType": 1,
      "flowNodeStatus": "1",
      "approvalType": 0,
      "multiInstanceApprovalType": 2,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": true,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777505202929213440",
          "flowTaskName": "审核",
          "createTime": "2024-04-09 09:13:59",
          "endTime": "2024-04-09 09:14:00",
          "operatorId": "00000000-0000-0000-0000-000000000000",
          "operatorType": "2",
          "recipientId": null,
          "comment": "自动通过",
          "isOperation": true
        }
      ]
    },
    {
      "flowNodeId": "userTask_31d8e38c9c954caab01d6c8de78e3d0b",
      "flowNodeName": "一级审核",
      "flowNodeType": 1,
      "flowNodeStatus": "1",
      "approvalType": 0,
      "multiInstanceApprovalType": 1,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": true,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777505207148683264",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-09 09:14:00",
          "endTime": "2024-04-09 09:30:58",
          "operatorId": "DB53B300-D193-4545-8B33-FE2F73429757",
          "operatorType": "7",
          "recipientId": null,
          "comment": "测试",
          "isOperation": true
        },
        {
          "flowTaskId": "1777505208117567488",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-09 09:14:00",
          "endTime": "2024-04-09 09:24:41",
          "operatorId": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
          "operatorType": "4",
          "recipientId": null,
          "comment": "测试",
          "isOperation": true
        }
      ]
    },
    {
      "flowNodeId": "userTask_6add4b3da39a48e29b1cf963edc0b2b4",
      "flowNodeName": "发起",
      "flowNodeType": 0,
      "flowNodeStatus": "1",
      "approvalType": 0,
      "multiInstanceApprovalType": null,
      "flowNodeNoAuditorType": null,
      "flowNodeSelfAuditorType": null,
      "isHighlight": true,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777509477814181888",
          "flowTaskName": "发起",
          "createTime": "2024-04-09 09:30:58",
          "endTime": "2024-04-09 09:42:24",
          "operatorId": "1807ECA5-CD71-4A8E-9F82-6C41616C1CCF",
          "operatorType": "0",
          "recipientId": null,
          "comment": "测试",
          "isOperation": true
        }
      ]
    },
    {
      "flowNodeId": "userTask_12aff57015df469a96bb2a173eb2d554",
      "flowNodeName": "审核",
      "flowNodeType": 1,
      "flowNodeStatus": "1",
      "approvalType": 0,
      "multiInstanceApprovalType": 2,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": true,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777512358239879168",
          "flowTaskName": "审核",
          "createTime": "2024-04-09 09:42:25",
          "endTime": "2024-04-09 09:42:26",
          "operatorId": "00000000-0000-0000-0000-000000000000",
          "operatorType": "2",
          "recipientId": null,
          "comment": "自动通过",
          "isOperation": true
        }
      ]
    },
    {
      "flowNodeId": "userTask_31d8e38c9c954caab01d6c8de78e3d0b",
      "flowNodeName": "一级审核",
      "flowNodeType": 1,
      "flowNodeStatus": "1",
      "approvalType": 0,
      "multiInstanceApprovalType": 1,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": true,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777512362010558464",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-09 09:42:26",
          "endTime": "2024-04-09 11:12:17",
          "operatorId": "DB53B300-D193-4545-8B33-FE2F73429757",
          "operatorType": "8",
          "recipientId": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
          "comment": "测试",
          "isOperation": true
        },
        {
          "flowTaskId": "1777512362010558464",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-09 09:42:26",
          "endTime": "2024-04-09 11:59:08",
          "operatorId": "DB53B300-D193-4545-8B33-FE2F73429757",
          "operatorType": "4",
          "recipientId": null,
          "comment": "测试",
          "isOperation": true
        },
        {
          "flowTaskId": "1777512363159797760",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-09 09:42:26",
          "endTime": "2024-04-09 10:04:24",
          "operatorId": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
          "operatorType": "6",
          "recipientId": "38AA7C7D-2656-4A6E-A54C-29E9A516D44B",
          "comment": "测试",
          "isOperation": true
        },
        {
          "flowTaskId": "1777512363159797760",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-09 09:42:26",
          "endTime": "2024-04-09 15:18:18",
          "operatorId": "38AA7C7D-2656-4A6E-A54C-29E9A516D44B",
          "operatorType": "4",
          "recipientId": null,
          "comment": "cs",
          "isOperation": true
        },
        {
          "flowTaskId": "1777534975164329984",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-09 11:12:17",
          "endTime": "2024-04-09 11:59:56",
          "operatorId": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
          "operatorType": "4",
          "recipientId": null,
          "comment": "测试数据",
          "isOperation": true
        }
      ]
    },
    {
      "flowNodeId": "userTask_41968f8232094e98b0a39c8a36ef54c2",
      "flowNodeName": "二级审核",
      "flowNodeType": 1,
      "flowNodeStatus": "1",
      "approvalType": 0,
      "multiInstanceApprovalType": 1,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": true,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777596896676798464",
          "flowTaskName": "二级审核",
          "createTime": "2024-04-09 15:18:20",
          "endTime": null,
          "operatorId": "38AA7C7D-2656-4A6E-A54C-29E9A516D44B",
          "operatorType": null,
          "recipientId": null,
          "comment": null,
          "isOperation": null
        },
        {
          "flowTaskId": "1777596898610372608",
          "flowTaskName": "二级审核",
          "createTime": "2024-04-09 15:18:21",
          "endTime": "2024-04-10 10:11:57",
          "operatorId": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
          "operatorType": "7",
          "recipientId": null,
          "comment": "测试",
          "isOperation": true
        }
      ]
    },
    {
      "flowNodeId": "userTask_6add4b3da39a48e29b1cf963edc0b2b4",
      "flowNodeName": "发起",
      "flowNodeType": 0,
      "flowNodeStatus": "1",
      "approvalType": 0,
      "multiInstanceApprovalType": null,
      "flowNodeNoAuditorType": null,
      "flowNodeSelfAuditorType": null,
      "isHighlight": true,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777882180433780736",
          "flowTaskName": "发起",
          "createTime": "2024-04-10 10:11:57",
          "endTime": "2024-04-10 10:13:17",
          "operatorId": "1807ECA5-CD71-4A8E-9F82-6C41616C1CCF",
          "operatorType": "0",
          "recipientId": null,
          "comment": "测试",
          "isOperation": true
        }
      ]
    },
    {
      "flowNodeId": "userTask_12aff57015df469a96bb2a173eb2d554",
      "flowNodeName": "审核",
      "flowNodeType": 1,
      "flowNodeStatus": "1",
      "approvalType": 0,
      "multiInstanceApprovalType": 2,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": true,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777882518876364800",
          "flowTaskName": "审核",
          "createTime": "2024-04-10 10:13:18",
          "endTime": "2024-04-10 10:13:19",
          "operatorId": "00000000-0000-0000-0000-000000000000",
          "operatorType": "2",
          "recipientId": null,
          "comment": "自动通过",
          "isOperation": true
        }
      ]
    },
    {
      "flowNodeId": "userTask_31d8e38c9c954caab01d6c8de78e3d0b",
      "flowNodeName": "一级审核",
      "flowNodeType": 1,
      "flowNodeStatus": "1",
      "approvalType": 0,
      "multiInstanceApprovalType": 1,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": true,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777882523238440960",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-10 10:13:19",
          "endTime": "2024-04-10 13:27:42",
          "operatorId": "DB53B300-D193-4545-8B33-FE2F73429757",
          "operatorType": "4",
          "recipientId": null,
          "comment": "测试视频",
          "isOperation": true
        },
        {
          "flowTaskId": "1777882524169576448",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-10 10:13:19",
          "endTime": "2024-04-10 13:24:33",
          "operatorId": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
          "operatorType": "6",
          "recipientId": "38AA7C7D-2656-4A6E-A54C-29E9A516D44B",
          "comment": "转交测试",
          "isOperation": true
        },
        {
          "flowTaskId": "1777882524169576448",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-10 10:13:19",
          "endTime": "2024-04-10 13:26:42",
          "operatorId": "38AA7C7D-2656-4A6E-A54C-29E9A516D44B",
          "operatorType": "8",
          "recipientId": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
          "comment": "并加签测试",
          "isOperation": true
        },
        {
          "flowTaskId": "1777882524169576448",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-10 10:13:19",
          "endTime": "2024-04-10 13:26:51",
          "operatorId": "38AA7C7D-2656-4A6E-A54C-29E9A516D44B",
          "operatorType": "4",
          "recipientId": null,
          "comment": "测试",
          "isOperation": true
        },
        {
          "flowTaskId": "1777931189982658560",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-10 13:26:42",
          "endTime": "2024-04-10 13:28:20",
          "operatorId": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
          "operatorType": "4",
          "recipientId": null,
          "comment": "测试",
          "isOperation": true
        }
      ]
    },
    {
      "flowNodeId": "userTask_41968f8232094e98b0a39c8a36ef54c2",
      "flowNodeName": "二级审核",
      "flowNodeType": 1,
      "flowNodeStatus": "1",
      "approvalType": 0,
      "multiInstanceApprovalType": 1,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": true,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777931607383015424",
          "flowTaskName": "二级审核",
          "createTime": "2024-04-10 13:28:22",
          "endTime": null,
          "operatorId": "38AA7C7D-2656-4A6E-A54C-29E9A516D44B",
          "operatorType": null,
          "recipientId": null,
          "comment": null,
          "isOperation": null
        },
        {
          "flowTaskId": "1777931608846827520",
          "flowTaskName": "二级审核",
          "createTime": "2024-04-10 13:28:22",
          "endTime": "2024-04-10 13:29:24",
          "operatorId": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
          "operatorType": "7",
          "recipientId": null,
          "comment": "测试驳回",
          "isOperation": true
        }
      ]
    },
    {
      "flowNodeId": "userTask_31d8e38c9c954caab01d6c8de78e3d0b",
      "flowNodeName": "一级审核",
      "flowNodeType": 1,
      "flowNodeStatus": "0",
      "approvalType": 0,
      "multiInstanceApprovalType": 1,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": true,
      "isCurrentNode": true,
      "otherData": null,
      "taskVos": [
        {
          "flowTaskId": "1777931874337882112",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-10 13:29:25",
          "endTime": null,
          "operatorId": "DB53B300-D193-4545-8B33-FE2F73429757",
          "operatorType": null,
          "recipientId": null,
          "comment": null,
          "isOperation": null
        },
        {
          "flowTaskId": "1777931875474538496",
          "flowTaskName": "一级审核",
          "createTime": "2024-04-10 13:29:26",
          "endTime": null,
          "operatorId": "F702DDAD-19DF-43E1-B501-14460BD50D5D",
          "operatorType": null,
          "recipientId": null,
          "comment": null,
          "isOperation": null
        }
      ]
    },
    {
      "flowNodeId": "userTask_41968f8232094e98b0a39c8a36ef54c2",
      "flowNodeName": "二级审核",
      "flowNodeType": 1,
      "flowNodeStatus": null,
      "approvalType": 0,
      "multiInstanceApprovalType": 1,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": false,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": null
    },
    {
      "flowNodeId": "userTask_8b5c9a482f224ee2bbc69a9ac7a49fd6",
      "flowNodeName": "终极审核",
      "flowNodeType": 1,
      "flowNodeStatus": null,
      "approvalType": 0,
      "multiInstanceApprovalType": 2,
      "flowNodeNoAuditorType": 0,
      "flowNodeSelfAuditorType": 0,
      "isHighlight": false,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": null
    },
    {
      "flowNodeId": "endEventNode",
      "flowNodeName": "结束",
      "flowNodeType": 9,
      "flowNodeStatus": null,
      "approvalType": null,
      "multiInstanceApprovalType": null,
      "flowNodeNoAuditorType": null,
      "flowNodeSelfAuditorType": null,
      "isHighlight": false,
      "isCurrentNode": null,
      "otherData": null,
      "taskVos": null
    }
  ]);
  */
  let  items=ref({});
  let orderStatus =ref(0);
  let errorReson=ref("");
// 属性
let props = defineProps({
	flowInts: { type: Object, default: () => ({}) },
	flowDef: { type: Object, default: () => ({}) },
  myitems:{type:Array,default:[]}
});

watch(

	() => props.flowInts,
	(nv) => {
    if (nv && nv.flowInstanceId) {
      FlowApi.getFlowInsts({ flowInstId: nv.flowInstanceId  }).then((resp2) => {
        if (resp2.code == 2000) {

          if(resp2.data.errorReson!=null){
            if(resp2.data.errorReson!="" && resp2.data.status !== 1 && resp2.data.status !== 2 && resp2.data.status !== 3){
              errorReson.value=resp2.data.errorReson;
            }
          }
        }
      });

      //listOldFlows


      FlowApi.getFlowNodesAndTaskByFlowInstansId({ flowInstId: nv.flowInstanceId  }).then((resp1) => {
        if (resp1.code == 2000) {
          //items.value=;
          //(resp1.data);
          loaditem(resp1.data || []);
        }
      });


    }
	},
	{ immediate: true }
);

const gettooltiptitleclass=(item)=>{
    if(item.isCurrentNode!=null){
      if(item.isCurrentNode==true){//如果是当前节点，判断是否有错误，有错误信息返回红色
        if(errorReson.value!=""){
          return 'tooltiptitleclose';
        }
      }
    }

      if(item.flowNodeStatus=="已拒绝"){
        return 'tooltiptitleclose';
      }else if(item.flowNodeStatus=="已作废"){
        return 'tooltiptitlecancel';
      }else{
        return (item.isCurrentNode==null && item.isHighlight==false)?'tooltiptitlewait':item.flowNodeStatus.indexOf('驳回')>-1?'tooltiptitleback':'tooltiptitlefinish';
      }
    };
const gettooltipcontentclass=(item,task)=>{
      if(task.operatorType==CMD.REJECTED.toString() || task.operatorType==CMD.AUTO_REJECTED.toString()){
        return 'tooltipcontentclose';
      }else if(task.operatorType==CMD.CANCELED.toString()){
        return 'tooltipcontentcancel';
      }else{
        return task.operatorType==null?'tooltipcontentwait':task.operatorType==CMD.BACK.toString()?'tooltipcontentback':'tooltipcontentfinish';
      }
    };
const  getstepclass=(item)=>{
  if(item.isCurrentNode!=null){
      if(item.isCurrentNode==true){//如果是当前节点，判断是否有错误，有错误信息返回红色
        if(errorReson.value!=""){
          return 'closestep';
        }
      }
    }
      if(item.flowNodeStatus==null){return '';}else
      if(item.flowNodeStatus=="已关闭" || item.flowNodeStatus=="已拒绝"){
        return 'closestep';
      }else if(item.flowNodeStatus=="已作废"){
        return 'cancelstep';
      }else{
        return item.flowNodeStatus.indexOf('驳回')>-1?'backstep':'';
      }
    };
 const gettooltipvis=(item,task)=>{
      if(task.operatorType==CMD.REJECTED.toString() || task.operatorType==CMD.AUTO_REJECTED.toString()){
        return true;
      }else{
        //return task.operatorType==null?false:true;
        return true;
      }
    };
  const  getnodestatus=(item)=>{
    if(item.isCurrentNode!=null){
      if(item.isCurrentNode==true){//如果是当前节点，判断是否有错误，有错误信息返回红色
        if(errorReson.value!=""){
          return '异常';
        }
      }
    }
      if(item.flowNodeStatus==null){return "";}
      if(item.flowNodeStatus.toString()==STATUS.UNDERWAY.toString()){
        return STATUS_LIST[0].name;
      }else if(item.flowNodeStatus.toString()==STATUS.APPROVED.toString()){
        if(item.flowNodeName=="申请"){
          return "已提交";
        }else{
          return STATUS_LIST[1].name;
        }
      }else if(item.flowNodeStatus.toString()==STATUS.REJECTED.toString()){
        return STATUS_LIST[2].name;
      }else if(item.flowNodeStatus.toString()==STATUS.CANCELLED.toString()){
        return STATUS_LIST[3].name;
      }else{
        return item.flowNodeStatus;
      }
    };
  const getoperator=(task)=>{
      if(task.operatorType==null){
        return "";
      }
      if(task.operatorType==CMD.START.toString()){
          return CMDCONTENT.START.toString();
      }else if(task.operatorType==CMD.AUTO_REJECTED.toString()){
          return CMDCONTENT.AUTO_REJECTED.toString();
      }else if(task.operatorType==CMD.AUTO_APPROVED.toString()){
          return CMDCONTENT.AUTO_APPROVED.toString();
      }else if(task.operatorType==CMD.REJECTED.toString()){
          return CMDCONTENT.REJECTED.toString();
      }else if(task.operatorType==CMD.APPROVED.toString()){
          return CMDCONTENT.APPROVED.toString();
      }else if(task.operatorType==CMD.CANCELED.toString()){
          return CMDCONTENT.CANCELED.toString();
      }else if(task.operatorType==CMD.ASSIGN.toString()){
          return CMDCONTENT.ASSIGN.toString();
      }else if(task.operatorType==CMD.BACK.toString()){
          return CMDCONTENT.BACK.toString();
      }else if(task.operatorType==CMD.ADD_SIGN.toString()){
          return CMDCONTENT.ADD_SIGN.toString();
      }else if(task.operatorType==CMD.DEL_SIGN.toString()){
          return CMDCONTENT.DEL_SIGN.toString();
      }else if(task.operatorType==CMD.ADD_BEFORE_SIGN.toString()){
          return CMDCONTENT.ADD_BEFORE_SIGN.toString();
      }else if(task.operatorType==CMD.COPY.toString()){
          return CMDCONTENT.COPY.toString();
      }else if(task.operatorType==CMD.FORWARD.toString()){
          return CMDCONTENT.FORWARD.toString();
      }else if(task.operatorType==CMD.COMMENT.toString()){
          return CMDCONTENT.COMMENT.toString();
      }else if(task.operatorType==CMD.TRANSACT.toString()){
          return CMDCONTENT.TRANSACT.toString();
      }else if(task.operatorType==CMD.TRIGGER.toString()){
          return CMDCONTENT.TRIGGER.toString();
      }else if(task.operatorType==CMD.DELAY.toString()){
          return CMDCONTENT.DELAY.toString();
      }else if(task.operatorType==CMD.SUBMIT.toString()){
          return CMDCONTENT.SUBMIT.toString();
      }else{
        return "";
      }

    };
    const getmultiInstanceApprovalType=(multiInstanceApprovalType)=>{
      if(multiInstanceApprovalType==null){return "";}
      if(multiInstanceApprovalType.toString()=="0"){
        return "";
      }else if(multiInstanceApprovalType.toString()=="1"){
        return "会签(需所有审批人同意)";
      }else if(multiInstanceApprovalType.toString()=="2"){
        return "或签(一名审批人同意即可)";
      }else if(multiInstanceApprovalType.toString()=="3"){
        return "依次审批(按顺序依次审批)";
      }else{
        return multiInstanceApprovalType;
      }
    };
const loaditem= async(myitems)=>{
    let newitems=[];
    let flag=false;//标识是否拒绝或撤销
    for (let index = 0; index < myitems.length; index++) {
      const item = myitems[index];
      if(item.flowNodeType!=null){
        if(item.flowNodeType==0){
          item.flowNodeName="申请";
        }
      }


      if(item.flowNodeStatus==null){item.flowNodeStatus="";}
      if(item.flowNodeStatus==STATUS.REJECTED.toString()){
          if(item.flowNodeStatus.indexOf("已拒绝")==-1){
            item.flowNodeStatus= "已拒绝";
          }
      }
      if(item.flowNodeStatus==STATUS.CANCELLED.toString()){
          if(item.flowNodeStatus.indexOf("作废")==-1){
            item.flowNodeStatus= "已作废";
          }
      }
      if(item.taskVos!=null){
        for (let tindex = 0; tindex < item.taskVos.length; tindex++) {
          const task = item.taskVos[tindex];
          let title = await cache.dic.label('SysUser',task.operatorId);
          task.operatorId=title=="未知"?"系统审批":title;
          //alert(task.operatorType+"  "+CMD.BACK.toString());
          if(item.flowNodeStatus==STATUS.REJECTED.toString()){
            if(task.operatorType==CMD.AUTO_REJECTED.toString() || task.operatorType==CMD.REJECTED.toString()){
              if(item.flowNodeStatus.indexOf("已拒绝")==-1){
                item.flowNodeStatus= "已拒绝";
              }
            }
          }else
          if(task.operatorType==CMD.BACK.toString()){
            if(item.flowNodeStatus.indexOf("已驳回")==-1){
                item.flowNodeStatus= "已驳回";
              }

            if(task.flowTaskName.indexOf("已驳回")==-1){
                task.flowTaskName= task.flowTaskName+"              已驳回";
            }
          }
        }
      }
      if(item.isHighlight==true){
        orderStatus.value=index+1;
      }
      if(item.isCurrentNode==true){
        if(item.flowNodeStatus.indexOf("已拒绝")>-1 || item.flowNodeStatus.indexOf("已作废")>-1){
          orderStatus.value=index+1;
          flag=true;
          index=index+(myitems.length-index-1);
        }
        if(!flag){
          orderStatus.value=index;
        }
      }

      newitems.push(item);

  }
items.value=newitems;

};


</script>

<style scoped lang="less">
.flowNodeClass *,
.flowNodeClass *::before,
.flowNodeClass *::after {
  outline: none;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  font-weight: normal;
}
@canvas-bg: #f5f5f7;

.flow-desgin {
  height: 100%;
  z-index: 1;
  cursor: grab;
}

.flow-desgin-main {
  width: 100%;
  background-color: #fff;
  user-select: none;

  .zoom {
    display: flex;
    position: absolute;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 40px;
    width: 125px;
    right: 40px;
    margin-top: 30px;
    z-index: 10;

    .zoom-in,
    .zoom-out {
      width: 30px;
      height: 30px;
      background: #fff;
      color: #c1c1cd;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #111;
      border-radius: 50%;
      transition: all 0.5s ease;

      &:hover {
        // transform: scale(1.1);
        box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
      }

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 50%;
        border: 1px solid transparent;
        box-shadow: 0 2px 5px #0000001a;
      }
    }

    .zoom-in.disabled,
    .zoom-out.disabled {
      opacity: 0.5;
    }
  }

  .box-scale {
    transform: scale(1);
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 54.5px 0;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
    transform-origin: 50% 0px 0px;
  }

  .end-node {
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    &::before {
      content: "";
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 4px;
      border-style: solid;
      border-width: 8px 6px 4px;
      border-color: #cacaca transparent transparent;
    }

    .title {
      height: 28px;
      border-radius: 8px 8px 0 0;
      background: #a9b4cd;
      padding: 0 12px;
    }

    .content {
      color: #646a73;
    }
  }
}


//表单内的审核流程图
::v-deep.steps {
	margin-top: 50px !important;
	margin-left: 20px !important;
	.el-step__main{
		//text-align: center;
	}
	.el-step.is-horizontal .el-step__line {
		//left: 40px;
		//right: -40px;
	}
	.el-step__title{
		font-size: 12px;
		font-weight: 400;
		position:relative;
		top: -60px;
		//min-width: 80px;
		text-align: center;
	}
	.el-step__description{
		font-size: 10px;
	   font-weight: 400;
	   position: relative;
	   top: -30px;
	   //min-width: 80px;
	   text-align: center;
	}
	  .el-step__title.is-finish {
        color: #419641;//编辑时标题颜色

      }
	  .el-step__description.is-finish {
		color: #419641;//编辑时标题颜色
	 }

     //finish状态自定义图片
      .el-step__head.is-finish {
        position: relative;
        height: 24px;
		border: none !important;
		color: #FF9800;

        .el-step__icon.is-text {
          border: none; //不显示圆圈
          //position: absolute;
          top: 2px;
          left: -2px;
          width: 20px;
          height: 20px;
          //background: #2b7bf0;
          // background-color: #000;
          background-image: url('~@/components/flowable/SVG/online-ok.svg');
          background-size: 100% 100%;

          // background: transparent;
        }

        .el-step__icon-inner {
          display: none;
        }
      }


	  .is-finish .el-step__line {
		//position: absolute;
		border-color: inherit;
		background-color: #FF9800 !important;
		height: 3px !important;
	}


      .el-step__title.is-process {
        color: #FF9800;//编辑时标题颜色
      }
	  .el-step__description.is-process {
		color: #FF9800;//编辑时标题颜色
	 }
     //process状态自定义图片
      .el-step__head.is-process {
        position: relative;
        height: 24px;

        .el-step__icon.is-text {
          border: none; //不显示圆圈
          //position: absolute;
        top: 2px;
          left: -2px;
          width: 20px;
          height: 20px;
          //background: #2b7bf0;
          // background-color: #000;
          background-image: url('~@/components/flowable/SVG/online-time.svg');
          background-size: 100% 100%;

          // background: transparent;
        }

        .el-step__icon-inner {
          display: none;
        }
      }
	  .is-process .el-step__line {
		position: absolute;
		border-color: inherit;
		height: 3px !important;
	}
      .el-step__icon-inner {
          display: none; //不显示内部数字
      }

      //success状态
      .el-step__title.is-success {
         color: #419641;//标题颜色
      }

      .el-step__head.is-success {
        // border-color: #2b7bf0;//圈边及连线颜色

        .el-step__icon.is-text {
          border: none;
		  //position: absolute;
		  top: 2px;
          left: -2px;
          width: 20px;
          height: 20px;
          //background: #2b7bf0;
          background-image: url('~@/components/flowable/SVG/online-time.svg');
          background-size: 100% 100%;

        }
      }

      //wait状态
	   //success状态
	   .el-step__title.is-wait {
	 }
	 .el-step__description.is-wait {
	 }
       .el-step__head.is-wait {
		position: relative;
		border: none !important;

        .el-step__icon.is-text {

		  border: none;
		  //position: absolute;
		  background-image: url('~@/components/flowable/SVG/online-time.svg');
          background-size: 100% 100%;
		  top: 2px;
          left: -2px;
          width: 20px;
          height: 20px;
          .el-step__icon-inner {
            // color: #95c1fc;
          }

        }
      }
	  .is-wait .el-step__line {
		position: absolute;
		border-color: inherit;
		height: 3px !important;
	}
	.backstep .el-step__title,.backstep .el-step__description{
		color: #FF9800 !important;
	}
	.cancelstep .el-step__title,.cancelstep .el-step__description{
		color: rgb(180, 180, 180)  !important;
	}


	.closestep .el-step__title,.closestep .el-step__description{
		color: red  !important;
	}



    }
	//单据明细审批流程图tooltip样式
	.tooltiptitlefinish{//已审批头部
		width: 100%;
		height: 20px;
		background-color: #fff;color:#419641 !important;padding: 0 5px;
		border-bottom:1px solid rgba(65,150,65,0.8);
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltiptitlewait{//未审批头部
		width: 100%;
		height: 20px;
		background-color: #fff;color:rgb(168, 171, 178) !important;padding: 0 5px;
		border-bottom:1px solid rgba(174,176,182,0.8);
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltiptitleback{//驳回头部
		width: 100%;
		height: 20px;
		background-color: #fff;color:#FF9800 !important;padding: 0 5px;
		border-bottom:1px solid rgba(255,153,0,0.8);
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltiptitleclose{//不通过头部
		width: 100%;
		height: 20px;
		background-color: #fff;color:red !important;padding: 0 5px;
		border-bottom:1px solid rgba(255,0,0,0.8);
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltiptitlecancel{//作废头部
		width: 100%;
		height: 20px;
		background-color: #fff;color:rgb(180, 180, 180) !important;padding: 0 5px;
		border-bottom:1px solid rgba(180,180,180,0.8);
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltipcontentfinish{//已审批内容
		background-color: rgba(65,150,65,0.8);color: #fff;border-radius: 3px;padding: 0 5px;margin-top: 3px;
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;

	}
	.tooltipcontentwait{//未审批内容
		//border-radius: 3px;padding: 0 5px;
		background-color: rgba(174,176,182,0.8);color: #fff;border-radius: 3px;padding: 0 5px;margin-top: 3px;
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltipcontentback{//驳回内容
		background-color: rgba(255,153,0,0.8);color: #fff;border-radius: 3px;padding: 0 5px;margin-top: 3px;
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltipcontentclose{//不通过内容
		background-color: rgba(255, 0, 0, 0.8);color: #fff;border-radius: 3px;padding: 0 5px;margin-top: 3px;
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}
	.tooltipcontentcancel{//不通过内容
		background-color: rgba(180, 180, 180, 0.8);color: #fff;border-radius: 3px;padding: 0 5px;margin-top: 3px;
		font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", Arial, Arial, sans-serif;
	}


</style>
